﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Grid Demo</title>
    <script type="text/javascript" language="javascript" src="scripts/libraries/jquery-1.8.3.js"></script>
    <script type="text/javascript" language="javascript" src="scripts/libraries/jquery-ui-1.9.2.js"></script>
    <script type="text/javascript" language="javascript" src="scripts/event-buffer.js"></script>
    <script type="text/javascript" language="javascript" src="scripts/table-scroll.js"></script>
    <script type="text/javascript" language="javascript" src="scripts/grid.js"></script>
    <script type="text/javascript" language="javascript" src="scripts/grid-constants.js"></script>
    <script type="text/javascript" language="javascript" src="scripts/grid-pager.js"></script>
    <script type="text/javascript" language="javascript" src="scripts/grid-column.js"></script>
    <script type="text/javascript" language="javascript" src="scripts/grid-header.js"></script>
    <script type="text/javascript" language="javascript" src="scripts/grid-body.js"></script>
    <script type="text/javascript" language="javascript" src="demo-scripts/common.js"></script>
    <script type="text/javascript" language="javascript" src="demo-scripts/demo-grid-script.js"></script>
    <script type="text/javascript" language="javascript" src="demo-scripts/data.js"></script>

    <link href="styles/style.css" rel="stylesheet" type="text/css" />

    <link href="styles/cupertino/jquery-ui-1.9.2.css" rel="stylesheet" id="themeLink" type="text/css" />
    <link href="styles/cupertino/grid-style.css" rel="stylesheet" id="gridStyle" type="text/css" />
    <link href="styles/cupertino/scroll-style.css" rel="stylesheet" id="scrollStyle" type="text/css" />
    
        
</head>
<body>
    <h2><a href="http://javascriptgrid.codeplex.com">Project page on CodePlex.</a></h2>
    <table>
        <tr>
            <td>
                <select id="themeSelector">
                    <option label="Flick" value="flick">Flick</option>
                    <option label="Cupertino" value="cupertino" selected="selected">Cupertino</option>
                    <option label="Vader" value="vader">Vader</option>
                </select>
            </td>
        </tr>
        <tr>
            <td id="gridContainer">
                
            </td>
        </tr>
        <tr>
            <td>
                <hr />
            </td>
        </tr>
        <tr>
            <td>
                <div id="accordion">
                    
                    <h3>Options</h3>
                    <div style="height:35px;">
                        <label style="padding-right:10px; padding-top:6px; float:left">Show Paging:</label>
                        <div id="pagerSettings">
                            <input type="radio" id="cbPagerNone" name="pagingOptions" /><label for="cbPagerNone">None (Virtual Scrolling)</label>
                            <input type="radio" id="cbPagerBottom" name="pagingOptions" checked="checked" value="PAGER_POSITION_BOTTOM"/><label for="cbPagerBottom">Bottom</label>
                            <input type="radio" id="cbPagerTop" name="pagingOptions" value="PAGER_POSITION_TOP"/><label for="cbPagerTop">Top</label>
                            <input type="radio" id="cbPagerTopAndBottom" name="pagingOptions" value="PAGER_POSITION_TOP_AND_BOTTOM" /><label for="cbPagerTopAndBottom">Top and Bottom</label>
                        </div>
                    </div>

                    <h3>Events</h3>
                    <div style="height:170px;">
                        <div>Events log:</div>
                        <div style="float:left">
                            <textarea style="width:550px; height:130px" id="logTextarea"></textarea>
                        </div>
                        <div style="float:left; margin-left:20px">
                            <input type="button" id="clearLogButton" value="Clear" />
                            <div style="float:left; margin-top:10px">
                                <div id="eventsToLog" style="vertical-align:middle">
                                    <label style="display: inline-block">
                                        <input style="vertical-align: middle" id="gridbodycellcustomdraw" type="checkbox" />
                                        <span style="vertical-align: middle">bodyCellCustomDraw</span>
                                    </label>
                                    <br />
                                    <label style="display: inline-block">
                                        <input style="vertical-align: middle" id="gridcolumnheadercustomdraw" type="checkbox" />
                                        <span style="vertical-align: middle">columnHeaderCustomDraw</span>
                                    </label>
                                    <br />
                                    <label style="display: inline-block">
                                        <input style="vertical-align: middle" checked="checked" id="gridgetdataframe" type="checkbox" />
                                        <span style="vertical-align: middle">getDataFrame</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                        
                    </div>
                    
                </div>
            </td>
        </tr>
</table>

    <script type="text/javascript" language="javascript">

        createGrid();

        $('#gridContainer').bind('gridbodycellcustomdraw', logEvent);
        $('#gridContainer').bind('gridcolumnheadercustomdraw', logEvent);
        $('#gridContainer').bind('gridgetdataframe', logEvent);

    </script>
</body>
</html>
